<template>
  <div class="blogEdit_box">
    <el-page-header @back="goBack" content="主页"> </el-page-header>

    <el-form ref="form" :model="blogInfo" label-width="40px">
      <el-form-item label="标题">
        <el-input v-model="blogInfo.title"></el-input>
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="blogInfo.cid" placeholder="请选择">
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            :label="item.cname"
            :value="item.cid"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摘要">
        <el-input
          type="textarea"
          rows="3"
          v-model="blogInfo.summary"
        ></el-input>
      </el-form-item>

      <el-form-item label="内容">
        <mavon-editor class="content_edit" v-model="blogInfo.content">
        </mavon-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editBlog">
          <span v-if="isBuild">立即创建</span>
          <span v-else>保存修改</span>
        </el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 文章详情信息
      blogInfo: {},
      // 判断是否新建
      isBuild: '',
      // // 编辑文章表单
      editBlogFrom: {
        id: '',
        title: '',
        content: '',
        smallText: '',
        category: '',
        oldCategory: '',
        tags: ''
      },
      // 分类列表
      categoryList: []
    }
  },
  methods: {
    // 根据 id 获取文章
    async getBlog (bid) {
      console.log('获取文章' + bid)

      const { data: res } = await this.$http.get('/blog/selectByBid.do?bid=' + bid)
      console.log('详细信息res' + res)
      if (res.flag !== true) return this.$message.error('获取文章详情失败！')
      this.$message.success('获取文章详情成功！')
      this.blogInfo = res.data
      console.log('详细信息blog' + this.blogInfo)

      // 因为后端需要根据旧分类查询 T-T
      this.editBlogFrom.oldCategory = this.blogInfo.category
      // console.log('T_T')
      // console.log(this.editBlogFrom.oldCategory)
    },
    // 获取当前时间
    getCurrentTime() {
      var myDate = new Date()
      var year = myDate.getFullYear()
      var mon = myDate.getMonth() + 1
      var date = myDate.getDate()
      var hours = myDate.getHours()
      var minutes = myDate.getMinutes()
      var seconds = myDate.getSeconds()
      var now
      if (seconds < 10 && minutes < 10) {
      now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':0' + seconds
      } else if (seconds < 10 && minutes > 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':0' + seconds
      } else if (seconds > 10 && minutes < 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':' + seconds
      } else {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
      }
      return now
    },
    // 新建文章、编辑文章
    async editBlog () {
      if (this.isBuild) {
        // 新建文章

        this.blogInfo.author = localStorage.getItem('username')
        this.blogInfo.uid = localStorage.getItem('uid')

        this.blogInfo.time = this.getCurrentTime()
        const { data: res } = await this.$http.post('/blog/add.do', this.blogInfo)
        console.log(this.blogInfo.uid)
        console.log('新建文章')
        console.log(res)
        if (res.flag !== true) return this.$message.error('创建失败')
        this.$message.success('发布文章成功')
        this.$router.push('/blogs')
        setTimeout(() => {
          this.$router.push('/blogs')
        }, 200)
      } else {
        // 编辑文章
        this.editBlogFrom.id = this.blogInfo.id
        this.editBlogFrom.title = this.blogInfo.title // 太难受了，因为字段不同的原因要每一项赋值，以匹配后端的参数，本来直接this.artcleInfo就可以
        this.editBlogFrom.content = this.blogInfo.content
        this.editBlogFrom.smallText = this.blogInfo.smallText
        this.editBlogFrom.category = this.blogInfo.category
        const { data: res } = await this.$http.put('/blog/update.do', this.editBlogFrom)
        console.log('编辑文章')
        console.log(res)
        if (res.flag !== true) return
        this.$message.success('编辑文章成功！')
        // setTimeout(() => {
        this.$router.push('/blogFind')
        // }, 200)
      }
    },
    // 获取所有分类
    async getCategory () {
      const { data: res } = await this.$http.get('/category/showAll.do')
      console.log('所有分类', res)
      if (res.flag !== true) return
      this.categoryList = res.data
      console.log('res.data.datas', this.categoryList)
    },
    // 返回事件
    goBack () {
      this.$router.push('/blogs')
    }
  },

  created () {
    // 可以获取路由路径中的路径参数 blogId
    const blogId = this.$route.params.bid
    console.log('------' + blogId)
    if (blogId) {
      this.getBlog(blogId)
      this.isBuild = false
    } else {
      this.blogInfo = {}
      this.isBuild = true
    }
    this.getCategory()
  }

}
</script>

<style lang="less" scoped>
.blogEdit_box {
  padding: 2% 5%;
  .el-page-header {
    margin-bottom: 3%;
  }
  .content_edit {
    z-index: 1;
    min-height: 600px;
  }
}
</style>
